<template>
  <div>
    <div class="numberPad">
      <div class="output">{{output}}</div>
      <div class="buttons">
        <button @click="inputContent">1</button>
        <button @click="inputContent">2</button>
        <button @click="inputContent">3</button>
        <button>+</button>
        <button @click="remove">删除</button>
        <button @click="inputContent">4</button>
        <button @click="inputContent">5</button>
        <button @click="inputContent">6</button>
        <button>-</button>
        <button @click="clear">清空</button>
        <button @click="inputContent">7</button>
        <button @click="inputContent">8</button>
        <button @click="inputContent">9</button>
        <button>×</button>
        <button class="ok" @click="ok">ok</button>
        <button @click="inputContent">.</button>
        <button @click="inputContent">0</button>
        <button>=</button>
        <button>÷</button>

      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component, Prop} from 'vue-property-decorator';

  @Component
  export default class NumberPad extends Vue {
    @Prop() readonly value!: number;
    output = this.value.toString();
    // temp = '';
    // state = 0;
    // a = '';
    // n = 0;

    inputContent(event: MouseEvent) {

      const button = (event.target as HTMLButtonElement);
      const input = button.textContent;
      // if (this.state !== 0) {
      //   this.a += input;
      //   this.output = this.a;
      //   console.log(this.a);
      //
      // } else {
      if (this.output.length === 16) {return;}
      if (this.output.indexOf('.') >= 0 && input === '.') {return;}
      if (this.output === '0') {
        if ('0123456789'.indexOf(input!) >= 0) {
          this.output = input!;
        } else {
          this.output += input;
        }
      } else {
        this.output += input;
        // }
      }


    }

    remove() {
      if (this.output.length === 1) {
        this.output = '0';
      } else {
        this.output = this.output.slice(0, -1);

      }
    }


    clear() {
      this.output = '0';
    }

    ok() {
      const number = parseFloat(this.output);
      this.$emit('update:value', number);
      this.$emit('submit', number);
      this.output = '0';
    }

    // add() {
    //   this.state = 1;
    //   this.n += 1;
    //   if (this.n === 1) {
    //     this.temp = this.output;
    //     return;
    //   } else {
    //     this.temp = this.output;
    //     this.output = JSON.stringify(parseInt(this.output) + parseInt(this.temp));
    //   }
    // }


    // equal() {
    //
    //   this.output = JSON.stringify(parseInt(this.output) + parseInt(this.temp));
    //   this.state = 0;
    //   this.a = '';
    // }
  }

</script>

<style lang="scss" scoped>
  @import "~@/assets/style/helper.scss";

  .numberPad {
    .output {
      @extend %innerShadow;
      @extend %clearFix;
      font-size: 36px;
      ///////////////////////////////////
      font-family: Consolas, monospace;
      ///////////////////////////////////
      padding: 9px 16px;
      text-align: right;
    }

    .buttons {
      /*border: 1px solid red;*/
      @extend %clearFix;

      > button {
        width: 20%;
        height: 64px;
        float: left;
        border: none;
        background: transparent;

        &.ok {
          height: 64*2px;
          float: right;
        }

        $bg: #F2F2F2;

        &:nth-child(1) {
          background: $bg;
        }

        &:nth-child(2), &:nth-child(6) {
          background: darken($bg, 4%);
        }

        &:nth-child(3), &:nth-child(7), &:nth-child(11) {
          background: darken($bg, 4*2%);
        }

        &:nth-child(4), &:nth-child(8), &:nth-child(12), &:nth-child(16) {
          background: darken($bg, 4*3%);
        }

        &:nth-child(5), &:nth-child(9), &:nth-child(13), &:nth-child(17) {
          background: darken($bg, 4*4%);
        }

        &:nth-child(10), &:nth-child(14), &:nth-child(18) {
          background: darken($bg, 4*5%);
        }

        &:nth-child(19) {
          background: darken($bg, 4*6%);
        }

        &:nth-child(15) {
          background: darken($bg, 4*7%);
        }
      }


    }

  }
</style>